/** @format */

import React from 'react';
import {header} from './index.styl';
import Reorder from '@material-ui/icons/Reorder';
import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew';
import {Link} from 'react-router-dom';
import {store} from '@/store';

interface IProps {
  [propName: string]: any;
}

class Menu extends React.Component<IProps> {
  constructor(props: IProps) {
    super(props);
    this.stretch = this.stretch.bind(this);
  }

  stretch(): void {
    store.dispatch({type: 'isStretch', val: !store.getState().isStretch});
  }

  render(): JSX.Element {
    return (
      <header className={header}>
        <div>
          <Link to={'/'} title="Blog Admin">
            Blog Admin
          </Link>
          <button onClick={this.stretch}>
            <Reorder />
          </button>
        </div>
        <Link to={'/login'} title="退出">
          <PowerSettingsNew />
        </Link>
      </header>
    );
  }
}

export default Menu;
